import React, {useEffect, useState} from 'react';
import $ from 'jquery'
import Carousel from "../../components/Carousel";
import News from './News'
import ImgNews from './ImgNews'
import Notice from "./Notice";
import Info from "./Info";
import './index.css'
import Business from "./Business";
import http from "../../util/http";
import {useNavigate} from "react-router-dom";
import more from './img/more.png'
import TimeLine from "./TimeLine";
import {useAppContext} from "../../App";
import {getTermTranslation} from "../../util/language";

export default function Home() {
    let navigate = useNavigate();
    const [imgData, setImhData] = useState([]);
    const [width,setWidth] = useState(1920);
    const [height,setHeight] = useState(460);
    const {selectTab, selectLanguage} = useAppContext();

    useEffect(() => {
        http.doGet('/model/data/get', {type: "banner"}).then(res => {
            if (res.status === 200) {
                setImhData(res.data)
            }
        })
        calcProportion()
        window.addEventListener("resize",calcProportion)
    }, [])

    function toPage(url, page, text, params, event) {
        navigate(url, {
            replace: false,
            state: {params, page, text}
        })
        event.stopPropagation();
    }

    function calcProportion() {
        const _root = $('#root')
        let img_width = _root.width();
        let img_height = 460 * img_width / 1920;
        setWidth(img_width)
        setHeight(img_height)
    }

    function openUrl(url) {
        if (url && url !== '') {
            window.open(url)
        }
    }
    function toMore(event){
        debugger
        if (selectTab === '总院动态'){

            toPage("/portal/dynamic", "news", getTermTranslation(selectLanguage,'总院动态'), {dirId: "256,402"}, event)
        }else {
            toPage("/portal/news", "news", getTermTranslation(selectLanguage,'水利要闻'), {dirId: "257,403"}, event)
        }
    }

    function checkUrl(url) {
        if (url && url !== '') {
            if (url.startsWith("http://") || url.startsWith("https://")) {
                // 将 https://www.giwp.org.cn/ 替换成  http://localhost:3000/
                // debugger
                // url = url.replace('https://www.giwp.org.cn/beforeLogin/','http://localhost:3000/')
                openUrl(url)

            } else {
                // 打开文章详情
                navigate('/portal/details', {
                    state: {docId:url, page: "home", text: ""}
                });
            }
        }

    }

    return (
        <div className="home-main">
            <Carousel className="home-carousel" width={(width / 10) * 7} height={height / 2}>
                {
                    imgData
                        .filter(item => {
                            return item.show_status === "1" || item.show_status === 1
                        })
                        .map((item, index) => {
                        // 如果字段包含了 show_status == 1 的时候显示
                        return (
                            <div className="swiper-slide" key={index}
                                 style={item.url && item.url !== "" ? {cursor: "pointer"} : {}}
                                 onClick={() => checkUrl(item.url)}>
                                <img src={item.img} style={{width: "100%", height: "100%"}}
                                     alt={item.title}/>,
                            </div>
                        )
                    })
                }
            </Carousel>
            <div className="home-content home-content-white">
                <div className="home-middle">
                    {/*<Headlines/>*/}
                    <div className="home-more-title">
                        <img src={more} className="home-more" onClick={(event) => toMore(event) }/>
                    </div>
                    <div className="home-content-both">
                        <div className="home-content-top-left">
                            <News/>
                        </div>
                        <div className="home-content-top-right">
                            <ImgNews/>
                        </div>
                    </div>
                </div>
            </div>
            <div className="home-content home-content-blur">
                <div className="home-middle">
                    <div className="home-content-both home-content-distance">
                        <div className="home-content-left">
                            <Notice/>
                        </div>
                        <div className="home-content-right">
                            <TimeLine/>
                        </div>
                    </div>
                </div>
            </div>
            <div className="home-content home-content-white">
                <div className="home-middle">
                    <Business/>
                </div>
            </div>
        </div>
    )
}
